﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>哆嗒数学编辑器</title>

<link  rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../mathquill/mathquill.css">`
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="../mathquill/mathquill.min.js" type="text/javascript"></script>
<style>
div.clear
{
	clear:both;
 
	}
div.math_bar
{
	text-align:left;
	}
div.math_panel div.math_bar span.math_type
{
	margin-left:5px;
	color:#000;
	cursor:default;
	font-family:"微软雅黑";
}
div.math_panel div.math_buttons
{
	margin-top:8px;
	height:100px;
}


div.math_panel div.math_buttons div.math_hide_buttons
{
	display:none;
	position:absolute;
	z-index:9999;
}

div.math_panel div.math_buttons  .math_button
{
	width:30px;
	height:30px;
	float:left;
	background-image:url(math.png);
	margin:5px;
	background-color:#eee;
	cursor:pointer;
}

div.math_panel div#duodaa_math
{
	font-size:50px;
	
}


</style>

</head>
<body >
<center>

<div class="math_panel">

<div class="math_bar" >
<span class="math_type" style="font-weight:bold; color:#F96">常用公式</span>
<span class="math_type">常用符号</span>
<span class="math_type">常用字母</span>     
</div>

<div class="math_buttons"  style="height:100px;">

<div class="math_show_buttons">
</div>

<div class="math_hide_buttons">
</div>

</div>

<div class="clear"></div>

<div class="math_showing" style="height:300px; vertical-align:middle;">
<div id="duodaa_math"  class="mathquill-editable"></div>
<div id="math_latex"></div>
</div>


</div>



</center>




<script>



//定义要生成的按纽命令
var duodaaMath = [
		[
			"{a}^{b}","{a}_{b}","{a}_{b}^{c}","^{b}{a}","_{b}{a}","_{b}^{c}{a}","\\frac{b}{a}","\\int","\\int_{a}^{b}",
			"\\oint","\\oint_{a}^{b}","\\sum","\\sum_{a}^{b}","\\prod","\\prod_{a}^{b}","\\coprod","\\coprod_{a}^{b}",
			"\\sqrt{x}","\\sqrt[3]{x}","\\bigcup","\\bigcup_{a}^{b}","\\bigcap","\\bigcap_{a}^{b}","\\overline{abc}",
			"\\underline{abc}","\\binom{n}{k}","\\sin","\\cos","\\tan","\\csc","\\sec","\\cot","\\ln"
		],
		[
			"\\pm","\\mp","\\ast","\\cdot","\\div","\\bigtriangleup","\\bigtriangledown",
			"\\triangleleft","\\triangleright",			
			"\\angle","\\circ","\\bullet","\\sqcap","\\sqcup","\\vee","\\wedge","\\oplus","\\ominus","\\otimes",
			"\\odot","\\bigcirc ","\\diamond","\\dagger","\\ddagger","\\times","\\infty","\\because","\\therefore",
			"\\le","\\ge","\\ne","\\prec","\\succ","\\equiv","\\preceq","\\succeq","\\doteq","\\ll","\\gg","\\sim",
			"\\subseteq","\\supseteq","\\simeq","\\subset","\\supset","\\approx","\\sqsubset","\\sqsupset","\\cong",
			"\\sqsubseteq","\\sqsupseteq","\\in","\\ni","\\propto","\\vdash","\\dashv","\\mid","\\models","\\perp",
			"\\parallel","\\bowtie","\\leftarrow","\\rightarrow","\\Leftarrow","\\Rightarrow",
			"\\leftrightarrow","\\Leftrightarrow"
		],
		
		[
			"\\alpha","\\beta","\\gamma","\\delta","\\epsilon","\\varepsilon","\\zeta","\\eta","\\theta",
			"\\vartheta","\\iota","\\kappa","\\lambda","\\mu","\\nu","\\xi","\\pi","\\varpi","\\rho","\\varrho",
			"\\sigma","\\varsigma","\\tau","\\upsilon","\\phi","\\varphi","\\chi","\\psi","\\omega","\\Gamma","\\Delta","Theta",
			"\\Lambda","\\Xi","\\Pi","\\Sigma","\\Upsilon","\\Phi","\\Psi","\\Omega","\\aleph"
		]

	];
	
$(".math_panel .math_show_buttons").mouseover( function(){$(".math_hide_buttons").show();});
$(".math_panel .math_show_buttons").mouseout ( function(){$(".math_hide_buttons").hide();});

$(".math_panel .math_type").click( function(){
	                                              $(".math_show_buttons").html(ger_panel($(this).index(),"show"));
												  $(".math_hide_buttons").html(ger_panel($(this).index(),"hide"));
												  $(".math_panel .math_type").css("color","#000");
												  $(".math_panel .math_type").css("font-weight","");
												  $(this).css("color","#F96");
												  $(this).css("font-weight","bold");
												  
												  $(".math_panel .math_button").click( function(){
													                                    
																						$("#duodaa_math").mathquill("write",$(this).attr("title"));                                                                                                                                                                                                                                  }
                                                                          );
											      $(".math_panel .math_buttons").mouseover( function(){$(".math_hide_buttons").show();});
                                                  $(".math_panel .math_buttons").mouseout ( function(){$(".math_hide_buttons").hide();});
																		  
											 }
							     );	
								 

	


//以下生成panel
function ger_panel(panel_order,buttons_type)
{
	var i=0;
	var html="";
	var math_cmds = duodaaMath[panel_order];
	var countPerLine = 12;
	
	var button_width = 30,button_height=30,iniLine = 0;
	
	
	if(panel_order==0)
	{
	   iniLine = 6;
	}
	else if(panel_order==1)
	{
	   iniLine = 0;
	}
	else if(panel_order==2)
	{
	   iniLine = 9;
	}
	
	if(buttons_type=="show")
	{
		math_cmds = math_cmds.slice(0,2*countPerLine);
		//intLine = 0;
	}
	else if(buttons_type=="hide")
	{
		math_cmds = math_cmds.slice(2*countPerLine,1000);
		iniLine += 2;
	}
	
	
	
	html += "<div>";
	
	for(i=0;i<math_cmds.length;i++)
	{
		if(i%countPerLine==0)html += "<div>";
		html += "<div class='math_button' title='"+ math_cmds[i]+ "' "
		html += "style='background-position:" + (-(i%countPerLine))*button_height+"px "  + (-iniLine*button_width)+"px;' >" + "&nbsp;";
		
		html += "</div>";
		if(i%countPerLine==countPerLine-1 || i==math_cmds.length)
		{
			iniLine += 1;
			html += "</div>";
			html += "<div class='clear'></div>";
		}
	}
	
	html += "</div>";
	
	//alert(html);
	
	return html;
	
}


var hl = $("#duodaa_math").html();
//$("#duodaa_math").html("\\pm").css("font-size","30px").mathquill('editable').mathquill('write', "");
//$("#duodaa_math").css("font-size","30px").mathquill('editable').mathquill('write', "");
//$("#duodaa_math").css("font-size","50px");
$("#duodaa_math").css("color","red").mathquill('editable');

 
function set_latex_buffer()
{
	 $("#math_latex").html($("#duodaa_math").mathquill("latex"));
}
	
	
setInterval("set_latex_buffer();",300)

</script>
</body>
</html>
